<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;padding: 0;
        }
        body{
            height: 750px;
        }
        ul{
            float:left;
            list-style: none;
            padding: 5px;
        } 
        li{
            float:left;
            list-style: none;
            padding: 5px;



        }
        .nav{
            height: 50px;
            position: relative;
            text-indent: 24px;
            word-spacing: 21px;
        }
        a{
            text-decoration: none;
            color:black;


        }
        a:hover{
            color: blue;

        }
        .nav-left{
            position: absolute;
            left: 0;
            top: 0;
            width: 420px;
            height: 50px;
            padding-top: 26px;
            font-size: 13px;
            float: left;
        }
        .nav-right{
            width: 140px;
            text-indent: 3px;
            position: absolute;
            right: 0;
            top: 0;
            padding-top: 26px;
            font-size: 12px;
        }
        .search{
            width: 655px;
            height: 38px;
            margin: 12px auto;
            border: 2px solid rgb(71, 111, 241);
            border-radius: 10px;
            position: relative;  
            overflow: hidden;
        }
        input{
            width: 655px;
            height: 38px;
            position:absolute;
            text-indent: 20px;
            border: none;
            background-size: 30px;
            outline: none;
            text-indent: 20px;         
            background-position-y: center;
        }
        .search-btn{
            width: 141px;
            height: 38px;
            position: absolute;
            border: none;
            right:0;
            top: 0;
            color: seashell;
            background-color: rgb(71, 111, 241);
            font-size: 20px;
            background: rgb(71, 111, 241) url("images/相机.PNG") no-repeat;

            background-size: 45px;
            background-position-y: center;
            text-indent: 47px;
        }
        .btn{
            border:none;
            width:60px;
            height:30px;
            position:absolute;
            top:0;
            right:0;
            opacity: 0.5;
            padding-top: 37px;
            font-size: 13px;
            color: black;
            background-color: #fff ;

        }
        .photo1{
            display: block;
            margin-left: auto;
            margin-right: auto;
            padding-top: 40px;
        }
        .db1{

            position: fixed;
            bottom: 0;
            opacity: 0.5;
            font-size: 13px;
            padding-bottom: 10px;
            text-indent: 20px;

            } 

        .db2{
            position: fixed;
            bottom: 0;
            right: 0;
            opacity: 0.5;
            font-size: 13px;
            padding-bottom: 10px;
        }

        table,td{
            border:1px solid #fff;line-height: 30px; margin-left: auto;margin-right: auto;
            }
        table{    
            border-collapse: collapse;                   
            width: 655px;
            height:20px;
            font-size: 20px;
            text-align:left;
            font-size: 15px;
        }

        .table:hover{
            color:rgb(28, 100, 184);
        }
        .color1{color:crimson;}
        .color2{color:orangered;}
        .color3{color:rgb(238, 182, 77);}

        .E{
            width: 655px;
            height: 30px;background-color: #fff;
            margin-left: auto;margin-right: auto;
            position: relative;
            padding-top: 35px;
        }
        .D{

            background-color: #fff;
            position: absolute;
            font-size: 15px;
            line-height: 30px;

        }
        .stu{
            width: 30px;
            height: 27px;
            position: fixed;
            right: 30px;
            bottom: 100px;
        }

        .there{
            width: 52px;
            height: 21px;
            background-color: royalblue;
            border-radius: 5px;
            right: 30px;
            color: cornsilk;
            border: none;



        }
        .menu{
            width: 35px;

            padding-left: 13px;

        }
        .drop{

        }
        

    </style>
</head>
<body>
    <hr/>
    <div class="nav">
        <div class="nav-left">
            <a href="http://Baidu.com//" target="_blank">新闻</a>
            <a href="http://Hao123.com//" target="_blank">hao123</a>
            <a href="http://map.com//" target="_blank">地图</a>
            <a href="http://Vedio.com//" target="_blank">视频</a>
            <a href="http://tieba.baidu.com//" target="_blank">贴吧</a>
            <a href="http://xueshu.baidu.com//" target="_blank">学术</a>
            <a href="http://more.baidu.com//" target="_blank">更多</a>

        </div>
        <div class="nav-right">
            <div>
                <ul>
                    <li class="menu">设置</li>
                    <button class="there">登录</button>
                </ul>
            </div>
        </div>
    </div>
    <img src="images/logo.PNG" class="photo1">
    <div class="search">
        <input type="text" class="search-input">
        <button class="search-btn">百度一下</button>
    </div>
    <div class="E">
        <p class="D">百度热搜</p>   
        <button class="btn">换一换</button> 
    </div> 
    <img src="images/二维码.PNG" class="stu">
    <table>
        <tr><td class="table"><span class="color1">1</span>  新冠病毒可在手机屏上存活一个月</td><td class="table">4  国内第四大运营商中国广电成立</td></tr>
        <tr><td class="table"><span class="color2">2</span>  青岛新增9例核酸检测阳性病例</td><td class="table">5  湖人捧起总冠军奖杯致敬科比</td></tr>
        <tr><td class="table"><span class="color3">3</span>  国家卫建委派工作组赴青岛</td><td class="table">6  气象专家辟谣所谓60年来最冷冬天</td></tr>
        
        </table>


    <div class="C">
        <table>
    </div>

    <div class="db1">
        <ul>
            <li>设为首页</li>
            <li>关于百度</li>
            <li>About baidu</li>
            <li>百度营销</li>
            <li>使用百度前必读</li>
            <li>意见反馈</li>
            <li>帮助中心</li>
        </ul>
    </div>
    <div class="db2"> 
        <ul>
            <li>@2020 Baidu</li>
            <li>（京）-经营性-2017-0020</li>
            <li>京公网安备11000002000001</li>
            <li>京ICP030173号</li>
        </ul>
    </div>

</body>
</html>